<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        .left-nav {
            width: 0px;
            background-color: #fff;
        }

        .right-container {
            flex: 1;
            background-color: #fff
        }

    </style>
</head>
<body>
<div class="container">

    <div class="left-nav" id="dragNav"></div>
    <div class="right-container" id="dragContent"></div>
</div>
<script src="release/go.js"></script>
<script>
    var $ = go.GraphObject.make;
    var dragContent = $(go.Diagram,"dragContent",{
        "animationManager.duration": 800,
        "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
        allowDrop: true,
        "grid.visible": true,//绘制网格
        initialContentAlignment: go.Spot.Center,//图形在居中的位置开始绘制
    })
    var ORIGINAL_HEIGHT = 400;
    dragContent.nodeTemplateMap.add("wenduji", $(go.Node, "Spot",
        {resizable: true, resizeObjectName: "BarSpace", locationObjectName: "Bulb", locationSpot: go.Spot.Center},

        $(go.Shape,
            {name: "BarSpace", width: 2.5, height: ORIGINAL_HEIGHT, strokeWidth: 0, fill: "rgba(0,0,0,.05)"},
            new go.Binding("height").makeTwoWay()
        ),

        // Farenheit scale, on the left:
        $(go.Panel, "Graduated",
            {
                background: "white",
                graduatedMin: -40, graduatedMax: 80,
                graduatedTickBase: 0, graduatedTickUnit: 1,
                alignment: go.Spot.BottomLeft,
                alignmentFocus: go.Spot.BottomLeft,
                alignmentFocusName: "line"
            },
            new go.Binding("graduatedMax", "", function (data) {
                if (data.type === "scaling") return 80;
                return (data.height * 0.3) - 40;
            }),
            $(go.Shape, {name: "line", geometryString: "M0 0 V-" + ORIGINAL_HEIGHT, stroke: "gray"},
                new go.Binding("height")),
            $(go.Shape, {alignmentFocus: go.Spot.Bottom, interval: 2, strokeWidth: 1, geometryString: "M0 0 V15"}),
            $(go.Shape, {alignmentFocus: go.Spot.Bottom, interval: 10, strokeWidth: 2, geometryString: "M0 0 V20"}),
            $(go.TextBlock, {interval: 20, font: "22px Georgia", alignmentFocus: new go.Spot(1, 0.5, 20, 0)}),
            // Mark 32 degrees on the farenheit scale:
            $(go.TextBlock, {
                interval: 32, graduatedFunction: function (n) {
                    return n === 32 ? "32—" : ""
                },
                font: "bold 12px Georgia", stroke: "red", alignmentFocus: new go.Spot(1, 0.5, 20, 0)
            })
        ),

        // Mercury bar, which represents the values of farenheit and celsius
        $(go.Shape,
            {
                width: 2.5, strokeWidth: 0, fill: "red",
                alignment: go.Spot.Bottom,
                alignmentFocus: go.Spot.Bottom,
            },
            new go.Binding('fill', 'type', function (t) {
                return t === "scaling" ? "lightcoral" : "red"
            }),
            // To determine the mercury level, look at both data.farenheit and data.celsius, but prefer celsius
            new go.Binding("height", "", function (data) {
                    var thermometerHeight = ORIGINAL_HEIGHT;
                    if (data.type === "scaling") thermometerHeight = data.height;
                    if (data.celsius !== undefined) {
                        // (celsius + minimum value) / (total celsius range) * height
                        return Math.max(0, ((data.celsius + 40) / 67) * thermometerHeight);
                    } else if (data.farenheit !== undefined) {
                        // (farenheit + minimum value) / (total farenheit range) * height
                        return Math.max(0, ((data.farenheit + 40) / 120) * thermometerHeight);
                    } else {
                        return 0;
                    }
                }
            ),
            new go.Binding("maxSize", "height", function (h) {
                return new go.Size(NaN, h)
            })
        ),

        // Celsius scale, on the right:
        $(go.Panel, "Graduated",
            {
                background: "white",
                // -40 to 27 because we picked -40 to 80 for farenheit, and want them to line up
                graduatedMin: -40, graduatedMax: 27,
                graduatedTickBase: 0, graduatedTickUnit: 1,
                alignment: go.Spot.BottomRight,
                alignmentFocus: go.Spot.BottomRight,
                alignmentFocusName: "line2"
            },
            new go.Binding("graduatedMax", "", function (data) {
                if (data.type === "scaling") return 80;
                return (data.height * 0.1675) - 40;
            }),

            $(go.Shape, {name: "line2", geometryString: "M0 0 V-" + ORIGINAL_HEIGHT, stroke: "gray"},
                new go.Binding("height")),
            $(go.Shape, {interval: 2, strokeWidth: 1, geometryString: "M0 0 V15"}),
            $(go.Shape, {interval: 10, strokeWidth: 2, geometryString: "M0 0 V20"}),
            $(go.TextBlock, {
                interval: 20, textAlign: "left", font: "22px Georgia",
                alignmentFocus: go.Spot.Left, segmentOffset: new go.Point(0, 22)
            })
        ),

        // Cosmetic: The stem and bulb
        $(go.Shape,
            {
                width: 25, height: 10, strokeWidth: 0, fill: "red",
                alignment: go.Spot.Bottom
            },
            new go.Binding('fill', 'type', function (t) {
                return t === "scaling" ? "lightcoral" : "red"
            })
        ),
        $(go.Shape, "Circle",
            {
                name: "Bulb",
                width: 55, height: 55, strokeWidth: 0, fill: "red",
                alignment: go.Spot.Bottom,
                alignmentFocus: go.Spot.Top,
            },
            new go.Binding('fill', 'type', function (t) {
                return t === "scaling" ? "lightcoral" : "red"
            })
        )
        ) // end node template
    )
    var model = $(go.GraphLinksModel)
    model.nodeDataArray = [
        {category: "wenduji", name: "as", height: 800, celsius: 40},

    ]
    dragContent.model = model;
</script>
</body>
</html>